<template>
  <div>
    <div class="plan">
      <div class="plan_top" @click="fun()">
        <img src="头像.png" alt />
        <span>集景Studio</span>
        <span class="plan_tu2">
          <img src="热度.png" alt />999+人关注
        </span>
        <p>
          <span>
            元 / m
            <sup>2</sup>
          </span>
          300
        </p>
      </div>

      <div class="plan_bottom">
        <p>空间规划</p>
        <p>储物收纳</p>
        <p>色彩搭配</p>
      </div>
      <div class="plan_img">
        <img src="plan.png" alt />
        <hr />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      this.$router.push("/shop");
    },
  },
};
</script>

<style scoped>
.plan {
  width: 90%;
  height: 240px;
  margin: 0 auto;
  margin-top: 20px;
  /* background: lightblue; */
}
.plan_top {
  height: 40px;
}
.plan_top img {
  width: 30px;
  height: 30px;
  float: left;
}
.plan_tu2 img {
  width: 10px;
  height: 10px;
}
.plan_tu2 {
  font-size: 10px;
  font-weight: normal;
  margin-left: 10px;
  margin-top: 10px;
  background: #fbf1f0;
  color: #ad5d5c;
}
.plan span {
  display: flex;
  float: left;
}
.plan span:nth-of-type(1) {
  font-weight: bold;
  margin-left: 10px;
  margin-top: 5px;
}
.plan p {
  float: right;
  margin-top: 5px;
  font-size: 20px;
}
.plan p span {
  float: right;
  font-size: 10px;
  position: relative;
  top: -3px;
}
.plan_bottom {
  width: 90%;
  margin-left: 35px;
}
.plan_bottom p {
  font-size: 12px;
  float: left;
  margin-left: 10px;
  background: #f7f6f2;
  color: #a79067;
  padding: 2px 5px;
  border-radius: 10px;
}
.plan_img img {
  float: right;
  width: 90%;
  margin-top: 5px;
}
.plan_img hr {
  width: 285px;
  float: right;
  margin-right: 3px;
  background: #eeeeee;
}
</style>